<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 450px;
            height: 210px;
            border: 1px solid #333;
        }
        .box img{
            float: left;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./image/bg.jpg" alt="">
         <p>
            1. 浮动元素有左浮动(float:left)和右浮动(float:right)两种
            2. 浮动的元素会向左或向右浮动，碰到父元素边界、其他元素才停下来
            3. 相邻浮动的块元素可以并在一行，超出父级宽度就换行
            4. 浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题)
            5. 浮动元素 后面 有 没有浮动的元素会占据浮动元素的位置，
         </p>
    </div>
</body>
</html>